<template>
  <div class="app-container">
    <el-form :model="form" ref="from" :inline="true" :rules="rules">
      <el-row :gutter="20">
        <el-col :span="10">
          <el-form-item label="标题" prop="title">
            <el-input
              v-model="form.title"
              placeholder="请输入标题"
              clearable
              maxlength="20"
              show-word-limit
              size="medium"
              style=" width: 25vw;"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="开启评论" prop="commentStatus">
            <el-radio-group v-model="form.commentStatus">
              <el-radio
                v-for="item in commentOptions"
                :key="item.value"
                :label="item.value"
              >{{item.label}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="是否展示" prop="showStatus">
            <el-radio-group v-model="form.showStatus">
              <el-radio
                v-for="item in showOptions"
                :key="item.value"
                :label="item.value"
              >{{item.label}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="10">
          <el-form-item label="摘要" prop="description">
            <el-input v-model="form.description" type="textarea" style="width: 25vw;" :autosize="{ minRows:5, maxRows: 6}" maxlength="100" show-word-limit />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-row>
            <el-form-item label="分类" prop="classify">
              <el-select v-model="form.classify" placeholder="请选择" clearable style="width: 20vw">
                <el-option
                  v-for="item in classifyOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="标记" prop="tagList">
              <el-select v-model="form.tagList" multiple placeholder="请选择" style="width: 20vw">
                <el-option v-for="item in tagOptions" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-row>
        </el-col>
<!--        <el-col :span="6">
          <el-form-item label="首图" prop="image">
            <imageUpload v-model="form.image" />
          </el-form-item>
        </el-col>-->
      </el-row>
      <el-row>
        <el-col :span="24">
          <mavon-editor v-model="form.content" ref="md" @imgAdd="imgAdd" @imgDel="imgDel"></mavon-editor>
          <el-form-item prop="content" />
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-form-item style="float: right;padding-right: 10%">
            <el-button type="info" @click="handleBack">返回</el-button>
            <el-button type="primary" :loading="loading" @click="handleIssue">发布</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { dictType } from '@/api/system/dict/data'
import { addBlog, getBlog, updateBlog } from '@/api/article/blog'

export default {
  name: 'BlogEdit',
  data() {
    return {
      form: {
        blogId: undefined,
        title: undefined,
        description: undefined,
        content: undefined,
        image: undefined,
        classify: undefined,
        commentStatus: undefined,
        showStatus: undefined,
        tagList: []
      },
      loading: false,
      isAdd: true,
      tagOptions: [],
      classifyOptions: [],
      commentOptions: [
        {
          value: '0',
          label: '开启'
        },
        {
          value: '1',
          label: '关闭'
        }
      ],
      showOptions: [
        {
          value: '0',
          label: '显示'
        },
        {
          value: '1',
          label: '隐藏'
        }
      ],
      rules: { // 表单校验
        title: [
          { required: true, message: '标题不能为空', trigger: 'blur' }
        ],
        content: [
          { required: true, message: '内容不能为空', trigger: 'blur' }
        ],
        description: [
          { required: true, message: '摘要不能为空', trigger: 'blur' }
        ],
        tagList: [
          { required: true, message: '标记不能为空', trigger: 'blur' }
        ],
        classify: [
          { required: true, message: '分类不能为空', trigger: 'blur' }
        ],
        commentStatus: [
          { required: true, message: '请选择评论状态', trigger: 'blur' }
        ],
        showStatus: [
          { required: true, message: '请选择展示状态', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    const blogId = this.$route.params && this.$route.params.blogId
    this.isAdd = blogId === '0'
    this.getTagList()
    this.getClassifyList()
    if (!this.isAdd) {
      this.getBlogById(blogId)
    }
  },
  methods: {
    getBlogById(blogId) {
      getBlog(blogId).then(res => {
        this.form = res.data
      })
    },
    getTagList() {
      dictType('article_tag').then(res => {
        this.tagOptions = res.data
      })
    },
    getClassifyList() {
      dictType('article_classify').then(res => {
        this.classifyOptions = res.data
      })
    },
    handleSave() { // 保存草稿
    },
    handleIssue() { // 发布
      this.$refs['from'].validate(valid => {
        if (valid) {
          this.loading = true
          if (this.isAdd) { // 执行新增
            addBlog(this.form).then(() => {
              this.msgSuccess('新增成功')
              this.handleBack()
            })
          } else {
            updateBlog(this.form).then(() => {
              this.msgSuccess('修改成功')
              this.handleBack()
            })
          }
        }
      })
    },
    imgAdd() {
    },
    imgDel() {},
    handleBack() {
      this.$router.push({ path: '/article/blog' })
    }
  }
}
</script>

<style scoped>

</style>
